<div class="flex max-h-screen flex-1 space-x-px">
  <div
    class="sidebar shrink-0 {{if this.sidebarIsCollapsed 'collapsed' 'w-72'}}"
  >
    {{#unless @modelIsChanging}}
      {{!
        We teardown and rebuild the sidebar when the model is changing
        so that its state is reset and it inherits the new model's data.
      }}
      <Document::Sidebar
        @profile={{this.authenticatedUser.info}}
        @document={{@document}}
        @docType={{@docType}}
        @isCollapsed={{this.sidebarIsCollapsed}}
        @toggleCollapsed={{this.toggleSidebarCollapsedState}}
        @viewerIsGroupApprover={{@viewerIsGroupApprover}}
      />
    {{/unless}}
  </div>

  <div class="w-full pt-4 pb-4 pr-4">
    <Hds::Card::Container
      @level="high"
      @hasBorder={{true}}
      @overflow="hidden"
      class="flex h-full items-center justify-center"
    >
      {{#unless @modelIsChanging}}
        {{!
          We teardown and rebuild the iframe when the model is changing
          so that any SRC changes don't add history entries,
          which would cause the back button to break.
        }}
        <iframe
          title="Google Doc"
          height="100%"
          width="100%"
          class="border-0"
          src="https://docs.google.com/document/d/{{@document.objectID}}/edit?embedded=true"
        >
        </iframe>
      {{/unless}}
    </Hds::Card::Container>
  </div>

</div>
